<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="800"  destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
      <el-form-item label="任务名称" class="inline" prop="jobName">
        <el-input v-model="form.jobName" placeholder="请输入任务名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务分组" class="inline" >
        <el-select v-model="form.jobGroup" placeholder="请选择任务组名" :clearable="true" style="width: 100%">
          <el-option v-for="item in dicts.system_global_taskgroup" :key="item.id" :label="item.k" :value="item.v"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="调用方法" prop="invokeTarget">
        <el-input v-model="form.invokeTarget" placeholder="请输入调用方法（必须cn.xiaoluxian.open开头）" clearable></el-input>
      </el-form-item>
      <el-form-item label="cron表达式" prop="cronExpression">
        <el-input v-model="form.cronExpression" placeholder="请输入cron表达式" clearable>
          <template #append><el-button @click="addCron">生成cron表达式</el-button> </template>
        </el-input>
      </el-form-item>
      <el-form-item label="执行策略">
        <el-radio-group v-model="form.misfirePolicy">
          <el-radio :label="item.sort == form.misfirePolicy?form.misfirePolicy:item.v" v-for="item in dicts.system_misfire_policy">{{ item.k }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否并发" class="inline">
        <el-radio-group v-model="form.concurrent">
          <el-radio :label="item.v == form.concurrent?form.concurrent:item.v" v-for="item in dicts.system_global_yesorno">{{item.k}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" class="inline">
        <el-radio-group v-model="form.status">
          <el-radio :label="item.v == form.status?form.status:item.v" v-for="item in dicts.system_task_status">{{ item.k }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false" >取 消</el-button>
      <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>

  <el-dialog title="Cron表达式生成器" v-model="cronDialog">
    <crontab
      @hide="cronDialog = false"
      @fill="form.cronExpression = $event"
      :expression="form.cronExpression"
    ></crontab>
  </el-dialog>
</template>
<script>
import Crontab from '@renderer/components/Crontab/index.vue'
export default {
  dicts:['system_global_taskgroup','system_misfire_policy','system_global_yesorno','system_task_status'],
  components:{
    Crontab,
  },
  computed: {
    id() {
      return id
    }
  },
  emits: ['success', 'closed'],
  data() {
    return {
      cronDialog: false,
      mode:'add',
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        jobName:'',
        jobGroup:'',
        invokeTarget:'',
        cronExpression:'',
        misfirePolicy:1,
        concurrent:1,
        status:1
      },
      //验证规则
      rules: {
        jobName: [
          {required: true, message: '任务名称为必填项！',change:'blur'},
        ],
        invokeTarget: [
          {required: true, message: '调用方法为必填项',change:'blur'},
        ],
        cronExpression:[
          {required: true, message: 'cron表达式为必填项',change:'blur'},
        ],
      },
    }
  },

  methods: {
    //点击节点
    handleNodeClick(data,checked){
      if(checked){
        this.$refs.tree.setCheckedNodes([data])
      }
    },
    //显示
    open(mode='add'){
      this.mode = mode;
      this.visible = true;
      return this
    },
    // 打开cron生成
    addCron(){
      this.cronDialog = true
    },
    //本地数据更新
    handleSaveSuccess(data, mode){
      if(mode =='add'){
        this.$refs.table.refresh()
        this.getData()
      }else if(mode =='edit'){
        this.$refs.table.refresh()
        this.getData()
      }
    },
    //表单提交方法
    submit(){
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          let res = {};
          if(this.mode == 'add'){
            res = await this.$API.monitor.timing.addTask.post(this.form)
          } else {
            res = await this.$API.monitor.timing.updateTask.post(this.form);
          }
          this.isSaveing = false;
          if(res.code == 200){
            this.$emit('success', this.form, this.mode)
            this.visible = false;
            this.$message.success("操作成功")
          }else{
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
    //表单注入数据
    async setData(id){
      if(id){
        let res = await  this.$API.monitor.timing.detail.get(id)
        this.form = res.data
      }

      // this.form.jobName = data.jobName
      // this.form.jobGroup = data.jobGroup
      // this.form.concurrent =data.concurrent
      // this.form.status = data.status
      //可以和上面一样单个注入，也可以像下面一样直接合并进去
      //Object.assign(this.form, data)
    }
  }
}
</script>

<style scoped>
.inline{
  display: inline-flex;
  vertical-align: middle;
  width: 50%;
}
</style>
